<script setup>

    // axios get tabbarList 
    //数据
    const tabbarList = [
        {icon: '&#xe651;', text: '首页', to: {path: '/home'}},
        {icon: '&#xe690;', text: '购物车', to: {path: '/cart'}},
        {icon: '&#xe655;', text: '订单', to: {path: '/order'}},
        {icon: '&#xe60b;', text: '我的', to: {path: '/my'}},
    ]
    import {RouterLink,useRoute}  from "vue-router";
    // const router = useRoute();
    // console.log(router);
</script>
<template>
<!-- tabbar_item--active -->
<!-- active-class="active" -->
<!-- :class="{'tabbar_item--active':item.path===}"  -->
    <!-- 底部tabbar -->
  <div class="tabbar" >
        <div class="tabbar_item " v-for="(item,index) in tabbarList" :key="index">
            <RouterLink :to="`${item.to.path}`" active-class="active">
                <span class="iconfont" v-html="item.icon"></span>
                <span class="tabbar_title">{{item.text}}</span>
            </RouterLink>
        </div>
        <!-- <div class="tabbar_item tabbar_item--active">
            <a href="/home">
                <span class="iconfont">&#xe651;</span>
                <span class="tabbar_title">首页</span>
            </a>
        </div>
        <div class="tabbar_item">
            <a href="/cart">
                <span class="iconfont">&#xe651;</span>
                <span class="tabbar_title">购物车</span>
            </a>
        </div>
        <div class="tabbar_item">
            <a href="/order">
                <span class="iconfont">&#xe651;</span>
                <span class="tabbar_title">订单</span>
            </a>
        </div>
        <div class="tabbar_item">
            <a href="/my">
                <span class="iconfont">&#xe651;</span>
                <span class="tabbar_title">我的</span>
            </a>
        </div> -->

  </div>
</template>
<style lang="scss" scoped>
@import '@/style/viriables.scss';

.tabbar {
    width: 100%;
    height: .49rem;
    position: absolute;
    left: 0;
    bottom: 0;
    border-top: .01rem solid $content_bgColor;
    display: flex;

    &_item {
        width: 25%;
        display: flex;
        justify-content: center;
        align-items: center;

        a {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            text-decoration: none;
            color: $content_fontcolor;
            
        }
        //活动样式
        &--active {
            a{
                color: #1FA4FC;
            }
       }
    }
    .active {
                color: #1FA4FC;
        }
}
</style>